<template>
    <div class="login-page-wrapper">
        <div class="left-section">
            <div class="promotional-text">
                <h1>安心交易</h1>
                <p>
                    欧易绝不会将用户的资金借出。您可以通过我们定期发布的储备金证明进行验证。
                </p>
            </div>
            <div class="mobile-trading-interface">
                <div class="mobile-header">
                    <div class="pair-selector">
                        <el-icon :size="16" color="#fff">
                            <ArrowLeft />
                        </el-icon>
                        <span> BTC/USDT</span>
                        <el-icon :size="12" color="#fff">
                            <ArrowDown />
                        </el-icon>
                    </div>
                    <div>
                        <el-icon :size="16" color="#FFD700">
                            <StarFilled />
                        </el-icon>
                        <el-icon :size="16" color="#fff" style="margin-left: 12px;">
                            <Upload />
                        </el-icon>
                    </div>
                </div>
                <div class="mobile-tabs">
                    <span v-for="(tab, index) in mobileTabs" :key="index" :class="['tab', { active: index === 0 }]">
                        {{ tab }}</span>
                </div>
                <div class="price-display">
                    <div class="current-price">72,859.8</div>
                    <div class="price-details">≈$72,880.20 +1.97%</div>
                </div>
                <div class="labels">
                    <span class="label no1"> NO.1</span>
                    <span class="label top"> Top</span>
                    <span class="label layer1"> Layer 1</span>
                </div>
                <div class="market-data">
                    <div v-for="(data, index) in marketData" :key="index" class="data-item">
                        {{ data }}
                    </div>
                </div>
                <div class="chart-controls">
                    <span v-for="(control, index) in chartControls" :key="index" class="control-item">
                        <span>
                            <span> {{ control }}</span>
                            <span> </span></span>
                        <el-icon v-if="index >= 4" :size="10" color="#666">
                            <ArrowDown />
                        </el-icon>
                    </span>
                    <el-icon :size="16" color="#666">
                        <Setting />
                    </el-icon>
                </div>
                <div class="chart-area">自定义图表区域</div>
                <div class="telegram-section">
                    <div class="telegram-text">加入我们的 Telegram 社区</div>
                    <div class="telegram-subtext">学课程、享福利、共交流</div>
                </div>
            </div>
        </div>
        <div class="right-section">
            <div class="login-container">
                <h2 class="login-title">登录</h2>
                <div class="login-tabs">
                    <span v-for="(tab, index) in loginTabs" :key="index"
                        :class="['login-tab', { active: index === activeLoginTab }]" @click="activeLoginTab = index">
                        {{ tab }}
                    </span>
                </div>
                <div v-if="activeLoginTab === 0">
                    <div class="form-group">
                        <input v-model="account.username" type="text" class="form-input" placeholder="请输入账号" />
                    </div>
                    <div class="form-group">
                        <input v-model="account.password" type="password" class="form-input" placeholder="请输入密码" />
                    </div>
                    <button class="next-btn" @click="accountLogin">登录</button>
                </div>
                <div v-if="activeLoginTab === 1">
                    <div class="form-group">
                        <input v-model="registerForm.username" type="text" class="form-input" placeholder="请输入账号" />
                    </div>
                    <div class="form-group">
                        <input v-model="registerForm.password" type="password" class="form-input" placeholder="请输入密码" />
                    </div>
                    <button class="next-btn" @click="accountRegister">注册</button>
                </div>
                <!-- <div v-else-if="activeLoginTab === 1">
                    <div class="phone-input">
                        <div class="country-code">
                            <span> +86</span>
                            <el-icon :size="12">
                                <ArrowDown />
                            </el-icon>
                        </div>
                        <input type="text" class="phone-number" placeholder="请输入手机号" />
                        <el-icon :size="16" color="#999">
                            <Close />
                        </el-icon>
                    </div>
                    <button class="next-btn" @click="login">下一步</button>
                </div> -->
                <div v-else-if="activeLoginTab === 2">
                    <div class="form-group">
                        <input type="text" class="form-input" placeholder="请输入邮箱/子账户" />
                    </div>
                    <button class="next-btn">下一步</button>
                </div>
                <div v-else-if="activeLoginTab === 3">
                    <div class="form-group">
                        <input type="text" class="form-input" placeholder="请扫描二维码登录" disabled />
                    </div>
                    <div style="text-align:center;color:#999;font-size:13px;">请使用欧易App扫码登录</div>
                </div>
                <div class="separator">
                    <span> 或使用其他方式</span>
                </div>

                <!-- <div class="alternative-login"> -->
                <!-- <button v-for="(method, index) in loginMethods" :key="index" class="login-method"> -->
                <!-- <XIcon v-if="method.icon" :icon="method.icon" :size="16"></XIcon> -->
                <!-- <span> {{ method.text }}</span> -->
                <!-- </button> -->
                <!-- </div> -->
                <!-- <div class="register-link"> -->
                <!-- <span> 还没有账号？</span> -->
                <!-- <a href="#"> 立即注册</a> -->
                <!-- </div> -->

            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { ArrowLeft, ArrowDown, Setting, Close, Headset } from '@element-plus/icons-vue';
import { login, getInfo, register } from '@/api/passport/index.js';
import { useRouter } from 'vue-router';

const router = useRouter();

const mobileTabs = ref(['Chart', 'Overview', 'Data', 'Trade'])
const marketData = ref([
    '24h high 73,196.2',
    '24h low 68,600.0',
    '24h vol (BTC) 21.14K',
    '24h turnover (USDT) 1.50B'
])
const chartControls = ref(['15m', '1h', '4h', '1D', 'More', 'Indicators'])
// const loginTabs = ref(['账号/密码', '手机', '邮箱/子账户', '二维码'])
const loginTabs = ref(['账号/密码', '注册'])
const loginMethods = ref([
    { text: '通行密钥', icon: null },
    { text: 'Google', icon: null },
    { text: 'Apple', icon: null },
    { text: 'Telegram', icon: null },
    { text: 'Web3 钱包', icon: null }
])

const activeLoginTab = ref(0)

const account = ref({
    username: '',
    password: ''
})

const registerForm = ref({
    username: '',
    password: '',
})

const accountLogin = async () => {
    const res = await login(account.value);
    if (res) {
        const infoRes = await getInfo();
        if (infoRes && infoRes.code === 'S') {
            localStorage.setItem('userInfo', JSON.stringify(infoRes.data));
            localStorage.setItem('token', res);
            router.push('/omission/statistics');
        } else {
            ElMessage.error(infoRes.message || '获取用户信息失败');
        }
    } else {
        ElMessage.error(res);
    }
}

const accountRegister = async () => {
    const res = await register(registerForm.value);
    if (res === "注册成功") {
        ElMessage.success('注册成功，请登录');
        activeLoginTab.value = 0;
    } else {
        ElMessage.error(res || '注册失败');
    }
}
</script>

<style lang="scss" scoped>
@use "@/assets/global.scss" as *;

.login-page-wrapper {
    display: flex;
    flex-direction: row;
    // min-height: 100vh;
    width: 100vw;
    align-items: stretch;
}

.left-section {
    flex: 0 0 60%;
    max-width: 60vw;
    background: #1a1a1a;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    // min-height: 100vh;
    box-sizing: border-box;
    height: 95%;
}

.promotional-text h1 {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 16px;
    color: #fff;
}

.promotional-text p {
    font-size: 16px;
    color: #999;
    line-height: 1.5;
}

.mobile-trading-interface {
    background: #1e2329;
    border-radius: 12px;
    padding: 20px;
    max-width: 400px;
    height: 83%;
}

.mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.pair-selector {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: bold;
}

.mobile-tabs {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #2a2e34;
    padding-bottom: 10px;
}

.tab {
    color: #666;
    font-size: 14px;
    cursor: pointer;
}

.tab.active {
    color: #00b36a;
    font-weight: bold;
}

.price-display {
    margin-bottom: 16px;
}

.current-price {
    font-size: 28px;
    font-weight: bold;
    color: #00b36a;
    margin-bottom: 4px;
}

.price-details {
    font-size: 14px;
    color: #00b36a;
}

.labels {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.label {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

.label.no1 {
    background: #ff4d4f;
    color: #fff;
}

.label.top {
    background: transparent;
    color: #fff;
    border: 1px solid #666;
}

.label.layer1 {
    background: transparent;
    color: #fff;
    border: 1px solid #666;
}

.market-data {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.data-item {
    font-size: 12px;
    color: #999;
}

.chart-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.control-item {
    font-size: 12px;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 2px;
}

.chart-area {
    height: 200px;
    margin-bottom: 20px;
}

.telegram-section {
    text-align: center;
    padding: 16px;
    background: #2a2e34;
    border-radius: 8px;
}

.telegram-text {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 4px;
}

.telegram-subtext {
    font-size: 12px;
    color: #999;
}

.right-section {
    flex: 0 0 40%;
    max-width: 40vw;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    // min-height: 100vh;
    box-sizing: border-box;
    border-radius: 10px;
    overflow: hidden;
}

.login-container {
    width: 100%;
    max-width: 400px;
    min-height: 420px;
    height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 10px;
    font-family: $font-family;
    overflow: hidden;
}

.form-group {
    margin-bottom: 20px;
}

.form-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    color: #000;
    outline: none;
    box-sizing: border-box;
}

.login-title {
    font-size: 24px;
    font-weight: bold;
    color: #000;
    margin-bottom: 30px;
    text-align: center;
}

.login-tabs {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.login-tab {
    color: #666;
    font-size: 14px;
    cursor: pointer;
    padding: 8px 0;
}

.login-tab.active {
    color: #000;
    font-weight: bold;
    border-bottom: 2px solid #000;
}

.phone-input {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 20px;
}

.country-code {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #000;
    font-size: 14px;
    margin-right: 12px;
}

.phone-number {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    color: #000;
}

.next-btn {
    width: 100%;
    padding: 12px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 30px;
}

.separator {
    text-align: center;
    position: relative;
    margin-bottom: 30px;
}

.separator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #eee;
}

.separator span {
    background: #fff;
    padding: 0 20px;
    color: #999;
    font-size: 14px;
    position: relative;
}

.alternative-login {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 30px;
}

.login-method {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #000;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.register-link {
    text-align: center;
    color: #666;
    font-size: 14px;
}

.register-link a {
    color: #00b36a;
    text-decoration: none;
}

.chat-bubble {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 50px;
    height: 50px;
    background: #00b36a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 179, 106, 0.3);
}
</style>